<template>
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="userName">
            <el-input type="userNmae" v-model="ruleForm.userName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="name" >
            <el-input type="nmae" v-model="ruleForm.name" >></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
            <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
            <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
            <el-input type="email" v-model="ruleForm.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    export default {
        name: "Register",
        data() {
            var validateUserName = (rule, value, callback) => {
                var reg_username = /^\w{6,12}$/;
                var flag = reg_username.test(value)
                if (!value) {
                    return callback(new Error('用户名不能为空'));
                }
                else if(!flag){
                    return callback(new Error('用户名长度为6-12位'))
                }
                else callback();
            }
            var validateName = (rule, value, callback) => {
                var reg_username = /^^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]{1,12}$/;
                var flag = reg_username.test(value)
                if (!value) {
                    return callback(new Error('昵称不能为空'));
                }
                else if(!flag){
                    return callback(new Error('昵称长度不能超过12位'))
                }
                else callback();
            }
            var checkEmail = (rule, value, callback) => {


                if (!value) {
                    callback(new Error('邮箱不能为空'));
                }
               var reg_email = /^\w+@\w{1,2}\.\w+$/;
                var flag = reg_email.test(value);
                debugger
                if(flag){
                    callback();
                }
                else{
                    return callback(new Error('邮箱填写格式不正确'));
                }

            };
            var validatePass = (rule, value, callback) => {
                var reg_password = /^\w{6,15}$/;
                var flag = reg_password.test(value)
                if (value === '') {
                    callback(new Error('请输入密码'));
                }
                else if(!flag){
                    callback(new Error('密码长度为6-15位'))
                }
                else {
                    if (this.ruleForm.checkPass !== '') {
                        this.$refs.ruleForm.validateField('checkPass');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleForm.pass) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                ruleForm: {
                    userName:'',
                    pass: '',
                    checkPass: '',
                    email: ''
                },
                rules: {
                    userName: [
                        {validator: validateUserName, trigger: 'blur'}
                    ],
                    pass: [
                        {validator: validatePass, trigger: 'blur'}
                    ],
                    checkPass: [
                        {validator: validatePass2, trigger: 'blur'}
                    ],
                    email: [
                        {validator: checkEmail, trigger: 'blur'}
                    ],
                    name: [
                        {validator: validateName, trigger: 'blur'}
                    ]
                }
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        var obj = {
                            username:this.ruleForm.userName,
                            name:this.ruleForm.name,
                            password:this.ruleForm.pass,
                            email: this.ruleForm.email,
                            avatar:'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
                        }
                        this.$axios.post("/user/register",obj).then(res=>{
                            if(res.data.code===400){
                                this.$message.error(res.data.msg)
                            }else{
                                this.$message.success(res.data.data)
                                this.resetForm('ruleForm');
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>

<style scoped>

</style>